<div style="position: relative;width: 1200px;padding: 24px;left: calc(50% - 600px);background: white">
  <!--    基础信息-->
  <div>
    <h2>基础信息</h2>
    <div class="flexRow">
      <span class="label"><span>*</span>出库标题</span>
      <input nz-input placeholder="出库标题" [maxLength]="20" [(ngModel)]="formData.title"/>
    </div>
    <div class="flexRow">
      <span class="label"><span>*</span>出库类型</span>
      <div>
        <nz-radio-group [(ngModel)]="formData.type">
          <label nz-radio [nzValue]="item.content*1" *ngFor="let item of outStoreTypes">{{item.name}}</label>
          <!--          <label nz-radio [nzValue]="1">销售出库</label>-->
          <!--          <label nz-radio [nzValue]="2">回收退货</label>-->
          <!--          <label nz-radio [nzValue]="3">不良品返场</label>-->
          <!--          <label nz-radio [nzValue]="4">物料出库</label>-->
          <!--          <label nz-radio [nzValue]="5">不良品作废</label>-->
        </nz-radio-group>
      </div>
    </div>
    <div class="flexRow">
      <span class="label">出库数量</span>
      <nz-input-number [(ngModel)]="formData.number" nzPlaceHolder="出库数量" [nzPrecision]="0"></nz-input-number>
    </div>
    <div class="flexRow">
      <span class="label" style="align-self: flex-start">备注</span>
      <textarea
        nz-input
        [maxLength]="100"
        [(ngModel)]="formData.remark"
        placeholder="备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>
  <!--    收货人信息-->
  <div>
    <h2>收货人信息</h2>
    <div class="flexRow">
      <span class="label"><span>*</span>发货方式</span>
      <div>
        <nz-radio-group [(ngModel)]="formData.deliveryMethod">
          <label nz-radio [nzValue]="1">顺丰快递</label>
          <label nz-radio [nzValue]="2">其他快递</label>
          <label nz-radio [nzValue]="3">线下配送</label>
        </nz-radio-group>
      </div>
    </div>
    <div class="flexRow" *ngIf="formData.deliveryMethod===2">
      <span class="label"><span>*</span>物流公司</span>
      <nz-select [(ngModel)]="formData.expressCode" nzPlaceHolder="请选择物流公司" [nzBackdrop]="true" nzAllowClear
                 style="width: 400px;"
                 nzShowSearch>
        <nz-option [nzValue]="l.content" [nzLabel]="l.name" *ngFor="let l of logistics"></nz-option>
      </nz-select>
    </div>
    <div class="flexRow" *ngIf="formData.deliveryMethod===2">
      <span class="label"><span>*</span>物流单号</span>
      <input nz-input placeholder="请输入物流单号" [maxLength]="20" [(ngModel)]="formData.expressNo"/>
    </div>
    <div class="flexRow" *ngIf="formData.deliveryMethod!==3">
      <span class="label"><span>*</span>邮费承担</span>
      <div>
        <nz-radio-group [(ngModel)]="formData.isFreight">
          <label nz-radio [nzValue]="0">我司承担</label>
          <label nz-radio [nzValue]="1">用户承担</label>
        </nz-radio-group>
      </div>
    </div>
    <div class="flexRow" *ngIf="formData.deliveryMethod!==3">
      <span class="label">快递费</span>
      <nz-input-number [(ngModel)]="formData.freight"  [nzPrecision]="2" nzPlaceHolder="快递费"></nz-input-number>
    </div>
  </div>
  <!--    收货人信息-->
  <div>
    <h2>收货人信息</h2>
    <div class="flexRow">
      <span class="label">供应商</span>
      <nz-select [(ngModel)]="formData.supId" nzPlaceHolder="请选择供应商" [nzBackdrop]="true" nzAllowClear
                 style="width: 400px;" (ngModelChange)="supplierChange()"
                 nzShowSearch>
        <nz-option [nzValue]="supplier.id" [nzLabel]="supplier.name"
                   *ngFor="let supplier of supplierOptions"></nz-option>
      </nz-select>
    </div>
    <div class="flexRow">
      <span class="label"><span *ngIf="formData.deliveryMethod!==3">*</span>收货人</span>
      <input nz-input placeholder="收货人" [maxLength]="20" [(ngModel)]="formData.consignee"/>
    </div>
    <div class="flexRow">
      <span class="label"><span *ngIf="formData.deliveryMethod!==3">*</span>联系方式</span>
      <input nz-input placeholder="联系方式" [maxLength]="20" [(ngModel)]="formData.tel"/>
    </div>
    <div class="flexRow">
      <span class="label"><span *ngIf="formData.deliveryMethod!==3">*</span>地区</span>
      <nz-cascader [(ngModel)]="formData.districtId" [nzOptions]="addressArea"></nz-cascader>
    </div>
    <div class="flexRow">
      <span class="label" style="align-self: flex-start"><span *ngIf="formData.deliveryMethod!==3">*</span>详细地址</span>
      <textarea
        nz-input
        [maxLength]="100"
        [(ngModel)]="formData.address"
        placeholder="详细地址"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>

  <!--    出库详情-->
  <div>
    <h2>出库详情</h2>
    <nz-table #basicTable
              [nzPageSize]="9999"
              nzShowPagination="false"
              nzOuterBordered="true"
              [nzData]="devices">
      <thead>
      <tr>
        <th nzAlign="center">序号</th>
        <th nzAlign="center">机器编码</th>
        <th nzAlign="center">库位</th>
        <th nzAlign="center">回收价</th>
        <th nzAlign="center">成色</th>
        <th nzAlign="center">机型</th>
        <th nzAlign="center">首次入库时间</th>
        <th nzAlign="center">成交入库时间</th>
        <th nzAlign="center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data;let index=index">
        <td nzAlign="center">{{ index + 1 }}</td>
        <td nzAlign="center">{{ data['equipmentCode'] }}</td>
        <td nzAlign="center">{{ data['libraryName'] }}</td>
        <td nzAlign="center">{{ (data['realValuation'] || 0) + (data['aprc'] || 0) + (data['cprc'] || 0) }}</td>
        <td nzAlign="center">{{ data['colourName'] }}</td>
        <td nzAlign="center">{{ data['modelName'] }}</td>
        <td nzAlign="center">{{ data['firstTime'] }}</td>
        <td nzAlign="center">{{ data['clinchTime'] }}</td>
        <td nzAlign="center">
          <i (click)="removeDevice(data['equipmentCode'])" nz-icon nzType="delete" style="color: red;font-size: 20px"
             nzTheme="outline"></i>
        </td>
      </tr>
      <tr (click)="selectDevice()">
        <td colspan="9" nzAlign="center">
          <i nz-icon nzType="plus" nzTheme="outline"></i>
          选择更多商品
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="btnRow">
    <button nz-button nzType="primary" (click)="save()">保存</button>
    <button nz-button nzType="default" (click)="back()">取消</button>
  </div>


</div>
